import React, {Component, useEffect, useState} from 'react';
import ProForm, {ProFormDateRangePicker, ProFormSelect, ProFormText} from "@ant-design/pro-form";
import {DaysRange} from "@alitajs/antd-plus";
import {Form, message, Select} from "antd";
import {useRequest} from "@@/plugin-request/request";
import moment from 'moment';
import request from "umi-request";

const { Option } = Select;


export default (props: any) => {

  const [tables, setTables] = useState(null);
  const [columns, setColumns] = useState(null);
  const [startTime, setStartTime] = useState('');
  const [endTime, setEndTime] = useState('');
  const [curDb, setCurDb] = useState(null);
  const list =  useRequest('/api/dataSource/list');
  const databasesArr = list?.data?.db;

  const handleDbChange = (value: any) => {
    setCurDb(value)
    databasesArr ?.map( (item: any) => {
      if (item?.name === value)setTables(item.table)
      return true;
    })
  }

  const handleTableChange = (value: any) => {
    databasesArr ?.map( (item: any) => {
      if (item?.name === curDb){
        item?.table?.map( (tb: any) => {
          if (tb?.name === value) setColumns(tb?.columns)
          return true;
        })
      }

      return true;
    })
  }


  return (
    <>
      <ProForm.Group>
        <Form.Item
          label="选择数据库"
          name="db"
          rules={[{ required: true }]}
        >

          <Select placeholder='请选择'
                  style={{ width: 300 }}
                  showSearch
                  allowClear
                  onChange={handleDbChange}>
            {
              databasesArr?.map( item => (
                <Option key={item.name} value={item.name}>{item.name}</Option>
              ))
            }
          </Select>

        </Form.Item>
        <Form.Item
          label="选择数据表"
          name="table"
          rules={[{ required: true }]}

        >

          <Select
            placeholder='请选择'
            style={{ width: 300 }}
            showSearch
            allowClear
            onChange={handleTableChange}>
            {
              tables?.map( item => (
                <Option key={ item.name } value={ item.name}>{item.name}</Option>
              ))
            }
          </Select>
        </Form.Item>
      </ProForm.Group>

      <ProForm.Group>


        <Form.Item
          label="选择字段"
          name="fields"
          rules={[{ required: true }]}
        >

          <Select
            placeholder='请选择'
            style={{ width: 300 }}
            mode="multiple"
            allowClear
          >
            {
              columns?.map( item => (
                <Option key={ item } value={ item}>{item}</Option>
              ))
            }
          </Select>
        </Form.Item>
      </ProForm.Group>
      </>
  );
}

